<template>
  <div class="app-container">
    
    <div class="ces-main">
      <el-form :inline="true" :model="Search" class="demo-form-inline" size="mini">
        <el-col :xs="10" :sm="8" :lg="6" :xl="4">
          <el-tabs v-model="Search.Status" @tab-click="refresh">
            <el-tab-pane v-for="item in cities" :label="item.label" :name="item.value" :key="item.value"></el-tab-pane>
          </el-tabs>
        </el-col>
        <el-col :xs="10" :sm="8" :lg="6" :xl="4">
          <el-tabs v-model="Search.BillState" @tab-click="refresh">
            <el-tab-pane v-for="item in BillStatecities" :label="item.label" :name="item.value"
              :key="item.value"></el-tab-pane>
          </el-tabs>
        </el-col>
      </el-form>
      <v-GetToolBar align="right" :MenuCode="MenuCode" :IsfunEdit='IsfunEdit' :Isfunfail='Isfunfail' @handeAdd='handeAdd'
        @handleEdit='handleEdit' @OpenFindForm='OpenFindForm' @handlexportData='handlexportData'
        @IsfunEdit='handleIsfunEdit' @IsfunDelete='handleIsfunfail' @handleclose='handleclose'></v-GetToolBar>


      <ces-table size='mini' :isSelection='false' :isIndex='true' :isSearch='true' :isHandle='false'
        :IsfunEdit='IsfunEdit' :Isfunfail='Isfunfail' :tableData='tableData' :tableCols='tableCols' :Search='Search'
        @refresh="refresh" @handleEdit='handleEdit' @handleDelete="delData" @handrowclick="handrowclick">
      </ces-table>
    </div>

    <!-- <router-link to="">跳转</router-link> -->
    <!--搜索弹框-->
    <el-dialog title="搜索" :visible.sync="SearchDialog" custom-class="dialogClass" class="searchDialog" center
      ref="searchDialog" :modal="false" :close-on-click-modal="true">
      <el-form :model="Search" label-width="90px" ref="searchForm">

        <Search-Form ref="form"   :frame="true" size='mini' labelWidth='50px' :searchData='Search' :tableCols='tableCols'
          :searchHandle="searchHandle" @handleEnter='refresh()'></Search-Form>
      </el-form>
      <div slot="footer" :style="{ 'margin-buttom': 0 == 0 ? DialogBtnMargin : DialogBtnMargin }">
        <el-button @click="reform()">重置</el-button>
        <el-button type="primary" @click="refresh()">确 定</el-button>
      </div>
    </el-dialog>


  </div>
</template>

<script>


//引入组件

import cesTable from "../Common//table.vue";
import SearchForm from "../Common//Search.vue";
import MianForm from "../Common//form.vue";

import { funDownload, GetTableColsData } from "@/api/Common";
import { getDataList, UpdateForm, DeleteForm, CloseForm } from '@/api/MesSales/SOrder';
import vGetToolBar from "../Common/GetToolBar";

export default {
  name: "SOrderBill",
  data() {
    //表单查询一般分为input，下拉框，和日期，下面是下拉框时的设置下拉信息的情况，我的项目没有用到，但是留着方便看

    return {
      MenuCode: "A050302",
      tableData: [],//表格数据
      tableCols: [],//表格列数据
      searchHandle: [],
      billID: "",
      IsfunEdit: false,
      Isfunfail: false,
      Search: {
        // 查询条件
        total: 0, // 总记录数
        pageSize: 13, // 一页显示的记录数
        page: 1, // /当前页码
        RNO: "002", // 表编号  根据Controller中对应的表编号
        jsWhere: "", // 自定义条件
        Status: 2,
        BillState: "BillStateALL",

      },
      cities: [
        {
          value: "ALL",
          label: "ALL",
        },
        {
          value: "0",
          label: "草稿",
        },
        {
          value: "1",
          label: "审核中",
        },
        {
          value: "2",
          label: "结案",
        },
        {
          value: "3",
          label: "作废",
        },
      ], BillStatecities: [
        {
          value: "BillStateALL",
          label: "ALL",
        },
        {
          value: "0",
          label: "未完成",
        },
        {
          value: "2",
          label: "已完成",
        }],
      SearchDialog: false,
      DialogBtnMargin: 0,
      dialogVisible: false,

    }
  },

  components: { //引入组件后注册组件
    cesTable,
    vGetToolBar,
    SearchForm,
    MianForm
  },
  mounted() {
    this.getTableCols()
    this.getDataList()
  },
  methods: {
    //搜索重置
    refresh() {
      this.getDataList();
    },
    reform() {
      this.Search = {
        // 查询条件
        // total: 0, // 总记录数
        pageSize: 13, // 一页显示的记录数
        page: 1, // /当前页码
        RNO: "002", // 表编号  根据Controller中对应的表编号
        jsWhere: "", // 自定义条件
        Status: 2,
        BillState: "BillStateALL",
      };
      this.getDataList();
    },
    //读取列配置
    async getTableCols() {
      this.tableCols = []
      const res = await GetTableColsData({ InterID: "334" });
      this.tableCols = res.data;

    },
    async getDataList() {
    
      const res = await getDataList({ data: JSON.stringify(this.Search) });
      debugger
      this.tableData = res.data.Table;

      //将data 中的数据放到DataList中
      this.Search.total = res.data.Table1[0].RecordCount;
      this.billID = "";

    }, OpenFindForm() {
      //打开搜索框
      this.SearchDialog = true;
      //计算外边距
      console.log(this.$refs.searchDialog.offsetHeight);
      this.DialogBtnMargin = this.$refs.searchDialog.offsetHeight - 40;
    }, handlexportData() {
      funDownload("334", JSON.stringify(this.Search));
    }, handleIsfunEdit() {
      this.IsfunEdit = true;
    }, handleIsfunfail() {
      this.Isfunfail = true;
    }, async handeAdd() {
      // 新建

      let routeUrl = this.$router.push({
        path: "/MesSales/SOrderForm",
        query: { billID: "", IsPostBack: false },
      });
      window.open(routeUrl.path, "_top");

    },
    async handleEdit(scope) {
      // 修改

      let routeUrl = this.$router.push({
        path: "/MesSales/SOrderForm",
        query: { billID: scope.row.billID, IsPostBack: false },
      });
      window.open(routeUrl.href, "_top");

      this.inputName = row.billID;


    }, delData({ $index, row }) {
      this.$confirm('删除操作, 是否继续?', '提示', {
        confirmButtonText: "确认",
        cancelButtonText: "取消",
      })
        .then(async () => {



          const result = await DeleteForm({

            billID: row.billID,
            types: 1,
            IsPostBack: false,
          });
          this.getDataList();
          this.$message({
            type: "success",
            message: result.msg,
          });

        })
        .catch((err) => {
          console.error(err);
        });
    },
    handrowclick(row) {


      this.billID = row.billID;

    }, handleclose() {


      if (this.billID != "") {

        this.$confirm('关单操作, 是否继续? 订单号：' + this.billID, '提示', {
          confirmButtonText: "确认",
          cancelButtonText: "取消",
        })
          .then(async () => {



            const result = await CloseForm({

              billID: this.billID,
              types: 1,
              IsPostBack: false,
            });
            this.getDataList();
            this.$message({
              type: "success",
              message: result.msg,
            });

          })
          .catch((err) => {
            console.error(err);
          });
      } else {
        this.$notify({
          title: "关单操作，请选择数据" + this.billID,
          dangerouslyUseHTMLString: true,
          message: "",
          type: "error",
        });
      }



    },


  }
}
</script>

<style lang="scss" scoped>
.app-container {
  .EditObjs-table {
    margin-top: 30px;
  }

  .permission-tree {
    margin-bottom: 5px;
  }
}

.searchDialog ::v-deep .el-dialog__header {
  background: #409eff;
}

.searchDialog ::v-deep .el-dialog__title {
  color: #fff;
}

.searchDialog ::v-deep .el-dialog__headerbtn .el-dialog__close {
  color: #fff;
}
</style>